<template>
    <div>
        <vxe-table ref="tableRef" max-height='300' border stripe
            :edit-config="{ mode: 'row', trigger: 'click', autoFocus: true }" :keyboard-config="{ isDel: true }"
            :data="newData">
            <vxe-column field="staid" title="对应站点" min-width="150" :edit-render="roleEditRender1"></vxe-column>
            <vxe-column field="leftlocid" title="左侧货位" min-width="150" :edit-render="roleEditRender2"></vxe-column>
            <vxe-column field="rightlocid" title="右侧货位" min-width="150" :edit-render="roleEditRender2"></vxe-column>
            <vxe-column title="操作" min-width="90">
                <template #default="{ row, _rowIndex }">
                    <el-button type="success" :icon="Plus" size="small" circle @click="addCrood(_rowIndex)" />
                    <el-button type="danger" :icon="Close" size="small" circle @click="DeleteCrood(_rowIndex)" />
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>

<script setup lang='ts'>
import { ref, watch, onMounted, nextTick, defineEmits, computed, reactive } from 'vue'
import { message } from "@/utils/message";
import { changeColor, cancelColor } from "@/views/home/components/dxfMap";
import { Plus, Close } from '@element-plus/icons-vue'
import { dialogStoreHook } from "@/store/modules/dialog";
import { GetStorePlaceList, GetAllStorePlaceList } from '@/utils/api/BasicManagement/locations'
import { GetAllStation } from '@/utils/api/dispatch/station'
import { ElMessageBox } from "element-plus";
import domZIndex from 'dom-zindex'
// vxe表单层级
domZIndex.setCurrent(10000)
const dialogStatus = dialogStoreHook();

const props = defineProps({
    data: {
        // 定义一个属性的类型为 Array，其中数组元素可以是任意类型（any）
        type: Array<any>,
        // 指定该属性为必需的，即在使用该组件时必须提供这个属性
        required: true,
        // 为该属性提供一个默认值，默认值为一个包含一个空对象的数组
        default: [{}],
    },
})
const tableRef = ref();
const newData = ref(props.data ? props.data : [{}])
const stationSelect = ref();
const siteList = ref()

const roleEditRender1 = reactive({
    name: 'VxeSelect',
    props: {
        filterable: true,
        clearable: true
    },
    options: [{}]
})

const roleEditRender2 = reactive({
    name: 'VxeSelect',
    props: {
        filterable: true,
        clearable: true
    },
    options: [{}]
})

// 新增站点信息
const addCrood = async (index) => {
    // // 获取表格组件的引用
    // const $table = tableRef.value;
    // // 检查表格引用是否存在
    // if ($table) {
    //     // 创建一个新的记录对象，初始状态为未标记（flag: false）
    //     const record = {
    //         flag: false
    //     };
    //     // 调用表格组件的插入方法，将新记录插入表格，并等待插入操作完成
    //     // 解构赋值获取插入后的新行对象
    //     const { row: newRow } = await $table.insertAt(record, index + 1);
    //     // 设置新插入的行进入编辑状态
    //     $table.setEditRow(newRow);
    // }
    newData.value.splice(index + 1, 0, {})
    // 进入编辑状态

};

// 删除站点信息
const DeleteCrood = (index) => {
    if (newData.value.length === 1) {
        message(`最后一条数据不能删除！`, {
            type: "error"
        });
    } else {
        if (dialogStatus.isFullscreen) {
            cancelColor(newData.value[index].staid)
        }
        // 过滤删除
        newData.value.splice(index, 1)
    }
};

// 监听表单数据
watch(() => newData.value, (newVal) => {
    dialogStatus.getStationList(newVal)
}, { deep: true, immediate: true })

// 自定义比较函数，用于按数值顺序比较 Code
function compareCodes(a, b) {
    const partsA = a.label.split('-').map(Number);
    const partsB = b.label.split('-').map(Number);
    // 比较每一部分，直到找到不同的部分
    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
        const numA = partsA[i] || 0; // 如果 partsA 没有这一部分，则视为 0
        const numB = partsB[i] || 0; // 如果 partsB 没有这一部分，则视为 0
        if (numA < numB) return -1;
        if (numA > numB) return 1;
    }
    return 0; // 如果所有部分都相同，则返回 0
}

onMounted(async () => {
    // 货位
    const res1 = await GetAllStorePlaceList()
    stationSelect.value = res1.Content.map(item => {
        return {
            value: item.Id,
            label: item.Code
        }
    })
    stationSelect.value.sort(compareCodes)
    roleEditRender2.options = stationSelect.value
    // 站点
    const res2 = await GetAllStation()
    siteList.value = res2.Content.map(item => {
        return {
            value: item.stationid,
            label: item.stationname
        }
    })
    siteList.value.sort((a, b) => {
        return a.label - b.label
    })
    roleEditRender1.options = siteList.value

    // newData.value.sort((a, b) => {
    //     return a.staid - b.staid
    // })


})

</script>